<!DOCTYPE html><html> 	
<head>		
<meta charset="utf-8" />		
<title>当当网</title>		
<style type="text/css">			
body {	padding: 1px 40px;	}			
.header{	clear: all;	
            height: 60px;}			
.header_left{	float: left; 
                margin: 0px 10px; 
				width:30%;}						
.header_all_right {	width: 25%;	
				    float: right;				
					margin-right: 10px;	
					font-family: "arial, helvetica, sans-serif";}						
.header_right_top {	margin-bottom: -5px; 
                    clear: right;}						
.head_right_bottom {clear: right; 
                    height: 40px;
					background-color: aliceblue;}						.header_right {	margin: 8px 6px;}						
.header_right a {	text-decoration: none;				                    color: black;	    
					padding: 3px;}						
.contend {	clear: left;				
			padding:  0px 10px;	}						
			.chart {	clear: left;				
			margin-top: 10px;}						
.bar {	background-color: orangered;				
		height: 35px;			}						
		.puture {	margin-top: 10px;				
		    border: solid;				
			border-color: aquamarine;				
			clear: left;				
			height: 400px;}						
.footer {	text-align: center;	}						
.contend .tag {	float: left;				
                width: 4.3%;				
				margin: 6px 10px 6px 10px;			}						.contend .tag a { text-decoration: none;				color: black;	  padding: 3px;				
				color: white;			}						
.puture1 { margin-top: 10px;				
		   margin-bottom: 10px;				
		   margin-left: -10px;			}						
.puture2 {	margin-left: 10px;				
		    clear: left;				
			height: 300px;				
			}			
.puture2 .shu{	float: left;}			
.puture2 .shu1 img{ display:inline-block; position:relative; left:0px; top:0px; z-index:1;}			
.puture2 .one {	margin-right: 0px;			}			
.puture .four .jianjie{	padding-top: 80px;				                        padding-right: 100px;}			
.puture2 .nine {	margin-left: 0px;	}									.four .jianjie a{	text-decoration:none;				                    color: blue;}			
.book2{	clear: left;				
        height: 130px;				
		margin: 20px 5px;			}			
.book2 .six a{	text-decoration: none;				                font-size:small;				
                color: blue;			}			
.book2 .six p{	font-size: x-small;				
                margin: 5px;			}						
.book3 .six a{	text-decoration: none;				                font-size:small;				
                color: blue;			}
.book2 .two2 img{ position:relative; 
                  left:-100px; 
				  top:0px;}			
.book3 .six p{	font-size: x-small;				
                margin: 5px;			}			
.book3 .twol { height: 120px;	}			
.book3 .two2{ position:relative; left:-100px; top:10px;}
.footer{ color: lightgray;				
         font-size: smaller;			}			
.one {	width: 8%;				
        float: left;			}						
.two {	width: 25%;				
        float: right;				
		text-align: center;			}			
.twol{	width: 20%;		
        float: left;			}			
.three { width: 26%;				
         float: left;	}						
.four {	width: 37%;				
		float: left;}						
.nine {	widows: 92%; 
		float: left;			}			
.six{ width: 65%;				
      float: left;			}			
.five{ width: 50%;	
       float: left;			}		
</style>	
</head> 	
<body>		
<div class="header">			
<div class="header_left">				
    <img src="8章素材/01 上机练习素材/练习4：当当图书榜/图片素材/logo.jpg" alt="logo" />			
</div>			
<div class="header_all_right">				
<div class="header_right_top">					
<img src="8章素材/01 上机练习素材/练习4：当当图书榜/图片素材/icon_count.png" alt="" />				
</div>				
<div class="head_right_bottom">					
<div class="two">						
<div class="header_right" style="height:30px;width: 70px;">							<a href="#">都看乐器</a>						
</div>					
</div>					
<div class="two">						
<div class="header_right" style="height:30px;width: 70px;">							<a href="#">数字馆</a>						
</div>					
</div>					
<div class="two">						
<div class="header_right" style="height:30px;width: 70px;">							<a href="#">当当优品</a>						
</div>					
</div>					
<div class="two">						
<div class="header_right" style="height:30px;width: 70px;">							<a href="#">唯品会</a>						
</div>					
</div>				
</div>			
</div>		
</div>		
<div class="contend">			
<div class="bar">				
<div class="tag">					
<a href="#">首页</a>				
</div>				
<div class="tag">					
<a href="#">图书</a>				
</div>				
<div class="tag">					
<a href="#">音像</a>				
</div>				
<div class="tag">					
<a href="#">童装</a>				
</div>				
<div class="tag">					
<a href="#">童装</a>				
</div>				
<div class="tag">					
<a href="#">童装</a>				
</div>				
<div class="tag">					
<a href="#">童装</a>				
</div>				
<div class="tag">					
<a href="#">童装</a>				
</div>				
<div class="tag">					
<a href="#">童装</a>				
</div>				
<div class="tag">					
<a href="#">童装</a>				
</div>				
<div class="tag">					
<a href="#">童装</a>				
</div>				
<div class="tag">					
<a href="#">童装</a>				
</div>				
<div class="tag">					
<a href="#">童装</a>				
</div>				
<div class="tag">					
<a href="#">童装</a>				
</div>				
<div class="tag">					
<a href="#">童装</a>				
</div>				
<div class="tag">					
<a href="#">童装</a>				
</div>				
<div class="tag">					
<a href="#">童装</a>				
</div>			
</div>			
<div class="chart">				
<img height="120" width="960" src="file:///C|/Users/MI/Desktop/练习素材/8章素材/01 上机练习素材/练习4：当当图书榜/图片素材/banner.png" />			
</div>			
<div class="puture">				
<div class="three">					
<div class="puture1">						
<img src="file:///C|/Users/MI/Desktop/练习素材/8章素材/01 上机练习素材/练习4：当当图书榜/图片素材/bg_bang.gif" />					
</div>					
<div class="puture2">						
<div class="shu">							
<img src="file:///C|/Users/MI/Desktop/练习素材/8章素材/01 上机练习素材/练习4：当当图书榜/图片素材/bookNo1.gif"/>
</div>
<div class="shu1">
<img src="file:///C|/Users/MI/Desktop/练习素材/8章素材/01 上机练习素材/练习4：当当图书榜/图片素材/book-01.jpg"/>				
</div>					
</div>				
</div>				
<div class="four">					
<div class="jianjie">						
<a href="#">偷影子的人</a>						
<p>埃及——世界上*伟大的文明体，其古代故事跨越了四千多年的历史时段，					而这一历史时段又塑造了日后整个世界的形态。
</p>						
<p>本书是乔安•弗莱切的代表作，作为英国BBC该书电视台相关古埃及解读的系列节目的原著，因此具有BBC纪录片式的客观性和权威性。						</p>						
<p>全书以古埃及4000多年一代代的王朝为阶段，按时间推行的王朝兴衰为轴线来讲述不同王朝的情况，根据考古实物，如壁画、神庙、金字塔等，以及各类出土的文献来还原每代帝王的生活和王朝的发展						</p>											
</div>				
</div>				
<div class="four" style="height: 400px;">					<div class="book1" style="height: 60px;">											</div>					
<div class="book2" >						
<div class="twol">							
<img src="file:///C|/Users/MI/Desktop/练习素材/8章素材/01 上机练习素材/练习4：当当图书榜/图片素材/bookNo2.gif"/>						
</div>	
<div class="two2">
<img src="file:///C|/Users/MI/Desktop/练习素材/8章素材/01 上机练习素材/练习4：当当图书榜/图片素材/book-02.jpg"/>
</div>					
<div class="six">							
<a href="#">看见（央视知名记者，主持人蔡静：十年个人成长的告白，中国社会变迁的备忘）</a>	<br/>							
<p>作者：蔡静 著</p>							
<p>出版社：广西师范大学出版社	</p>								<p>29.4￥7.4折</p>						
</div>					
</div>					
<div class="book3">						
<div class="twol">							
<img src="file:///C|/Users/MI/Desktop/练习素材/8章素材/01 上机练习素材/练习4：当当图书榜/图片素材/book-03.jpg"/>						
</div>
<div class="two2">
<img src="file:///C|/Users/MI/Desktop/练习素材/8章素材/01 上机练习素材/练习4：当当图书榜/图片素材/bookNo3.gif"/>
</div>						
<div class="six">							
<a href="#">看见（央视知名记者，主持人蔡静：十年个人成长的告白，中国社会变迁的备忘）</a><br/>							
<p>	作者：蔡静 著</p>							
<p>出版社：广西师范大学出版社	</p>								<p>29.4￥   7.4折</p>						
</div>				
</div>			
</div>		
</div>		
<div class="footer">Copyright (C) 当当网 2004-2017, All Rights Reserved <img src="file:///C|/Users/MI/Desktop/练习素材/8章素材/01 上机练习素材/练习4：当当图书榜/图片素材/validate.gif" />京ICP证041189号出版物经营许可证 新出发京批字第直0673号</div>	
</body> 
</html>
